<template>
    <el-main>
        <div class="container">
            <el-button class="projects" @click="newEdit">
                <i class="el-icon-folder-add"></i>
                <h2>创建新项目</h2>
            </el-button>
            <el-button class="projects" v-for="(item,index) in projects" :key = index @click="toEdit(index)">
                <i class="el-icon-edit-outline"></i>
                <h2>
                    {{ item }}
                </h2>
                <el-row>
                    <el-button type="danger" class="delBtn" @click.stop="delProject(index,item)">删除</el-button>
                </el-row>
            </el-button>
        </div>
    </el-main>
</template>

<script>
import store from '@/store'
import { mapState } from 'vuex'

export default {
    data:()=>{
        return{

        }
    },
    computed: mapState([
        'projects'
    ]),
    methods:{
        newEdit:function(){
            this.$router.push({path:'/edit'})
        },
        toEdit:function(index){
            this.$router.push({
                name: 'Edit',
                params: {
                    id: index
                }
            })
        },
        delProject:function(index,item){
            this.$store.commit('delProject',index);
            if(JSON.parse(window.localStorage.getItem('projects')).length <1){
                this.$parent.isSaved = false;
            }
            this.$store.commit('toRefuse',{
                name: item,
                time: new Date().toLocaleString()
            });
            this.$message({
                message:'删除成功！您可以在回收站找到并恢复您的项目。',
                type: 'success'
            })
        },
    },
    beforeCreate(){
    }
}
</script>

<style lang="scss" scoped>
    .el-main{
        width: 100%;
        padding: 2%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        .container{
            width: 80%;
            display: flex;
            justify-content: flex-start;
            flex-direction: row;
            flex-wrap: wrap;
            .projects{
                width:21%;
                height: 200px;
                margin: 2%;
                border: 1px solid black;
                box-sizing: border-box;
                border-radius: 6px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                position: relative;
                i{
                    font-size: 4em;
                }
                .el-row{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    display: flex;
                    justify-content: center;
                    width: 100%;
                }
            }
        }
    }
</style>